<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>菜谱项目应用</title>
    <style>
      *,
      ::before,
      ::after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }
  
      html,
      body,
      #root {
        overflow: hidden;
        height: 100%;
      }
  
      html {
        /* rem 换算单位  可以在移动端中使用vw/vh单位（建议） */
        font-size: 100px;
  
        background-color: #eee;
        color: #212121;
        -webkit-user-select: none;
        user-select: none;
      }
  
      ::-webkit-scrollbar {
        display: none;
      }
  
  
      body {
        margin: 0;
        font-size: 0.14em;
        line-height: 1.5;
        font-family: PingFangSC-Regular, Hiragino Sans GB, Helvetica Neue, Helvetica, STHeiTi, sans-serif;
        -webkit-font-smoothing: antialiased;
      }
  
      ul,
      ol,
      dl,
      dd,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      figure,
      form,
      fieldset,
      legend,
      input,
      textarea,
      button,
      p,
      blockquote,
      th,
      td,
      pre,
      xmp {
        margin: 0;
        padding: 0;
      }
  
      input,
      textarea,
      button,
      select,
      pre,
      xmp,
      tt,
      code,
      kbd,
      samp {
        line-height: inherit;
        font-family: inherit;
      }
  
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      small,
      big,
      input,
      textarea,
      button,
      select {
        font-size: inherit;
      }
  
      address,
      cite,
      dfn,
      em,
      i,
      optgroup,
      var {
        font-style: normal;
      }
  
      table {
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;
        text-align: left;
      }
  
      ul,
      ol,
      menu {
        list-style: none;
      }
  
      fieldset,
      img {
        border: 0;
        vertical-align: middle;
      }
  
      article,
      aside,
      details,
      figcaption,
      figure,
      footer,
      header,
      main,
      menu,
      nav,
      section,
      summary {
        display: block;
      }
  
      audio,
      canvas,
      video {
        display: inline-block;
      }
  
      blockquote:before,
      blockquote:after,
      q:before,
      q:after {
        content: "\0020";
      }
  
      textarea,
      pre,
      xmp {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
  
      textarea {
        resize: vertical;
      }
  
      input,
      textarea,
      button,
      select,
      summary,
      a {
        outline: 0 none;
      }
  
      input,
      textarea,
      button,
      select {
        color: inherit;
      }
  
      input:disabled,
      textarea:disabled,
      button:disabled,
      select:disabled {
        opacity: 1;
      }
  
      button::-moz-focus-inner,
      input::-moz-focus-inner {
        padding: 0;
        border: 0;
      }
  
      input[type="button"],
      input[type="submit"],
      input[type="reset"],
      input[type="file"]::-webkit-file-upload-button,
      input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
      }
  
      ::-webkit-details-marker {
        display: none;
      }
  
      mark {
        background-color: rgba(0, 0, 0, 0);
      }
  
      a,
      ins,
      s,
      u,
      del {
        text-decoration: none;
      }
  
      a,
      img {
        -webkit-touch-callout: none;
      }
  
      a {
        color: #00afc7;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
